<template>
  <div>
    <p>fullName:{{ fullName }}</p>
    <button @click="fullName = 'wang wu'">修改姓名</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { ref, computed } from 'vue';
const firstName = ref('zhang');
const lastName = ref('san');

// 书写一个只读计算属性
// const fullName = computed(() => {
//   return firstName.value + lastName.value;
// });

// 书写一个可读可写的计算属性
const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value;
  },
  set(newVal) {
    firstName.value = newVal.split(' ')[0];
    lastName.value = newVal.split(' ')[1];
  },
});
</script>
<style></style>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">count累加</button>

    <p>{{ person }}</p>
    <button @click="changePerson">修改person</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { ref, watch } from 'vue';

const count = ref(0);
// 对于ref保存的是一个基本类型值的话，我们直接监听当前ref对象即可得到值的改变
watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal);
});

// 对于ref保存的是一个对象类型
const person = ref({
  name: '张三',
  age: 18,
});

const changePerson = () => {
  person.value.name = person.value.name + '1';
};

// 如果ref对象保存的是一个对象类型，我们监听ref对象，可以监听到对象的替换（可以监听到ref对象的转换）
// 总结：如果监听ref对象，则只能监听ref对象的value属性的替换，如果想要深层次的监听请使用deep深度监听

watch(
  person,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  {
    deep: true,
  }
);
</script>
<style></style>
